<!DOCTYPE html>
<html>
  <head>
    <title>Mdown Test Page</title>
    <link rel="stylesheet" type="text/css" href="example.css" />
    <script src="../build/js/mdown.cc.js"></script>
  </head>
  <body>
    <div class="mdown-panel-outer">
      <div id="mdown-editor" class="mdown-panel">
        <textarea id="mdown-input"></textarea>
      </div>
    </div>
    <div class="mdown-panel-outer">
      <div id="mdown-preview" class="mdown-panel"></div>
    </div>
    <script>
      (function(){
        var t=document.getElementById('mdown-input'),
            p=document.getElementById('mdown-preview');
        
        t.onkeyup=function(){ p.innerHTML=mdown(t.value); }
        
        t.onscroll=function(){ 
          p.scrollTop = t.scrollTop / (t.scrollHeight - t.clientHeight) 
                        * (p.scrollHeight - p.clientHeight);
        }
      }());
    </script>
  </body>
</html>

